<template>
  <div id="studyPlanView">
    <h2 class="page-title">个性化学习计划</h2>
    
    <!-- 职位选择区域 -->
    <div class="position-selector-container" v-if="!selectedPosition">
      <a-card class="position-selector-card">
        <div class="position-selector-header">
          <h3>选择您的职业方向</h3>
          <p>我们将根据您的选择提供个性化学习计划</p>
        </div>
        <div class="position-selector">
          <div class="position-options">
            <div 
              class="position-option-card" 
              v-for="position in positions" 
              :key="position.value"
              @click="selectPosition(position.value)"
            >
              <div class="position-icon-container">
                <component :is="getIconComponent(position.icon)" class="position-icon" />
              </div>
              <div class="position-info">
                <h4>{{ position.name }}</h4>
                <p>{{ position.description }}</p>
              </div>
              <div class="position-action">
                <a-button type="primary" shape="round">选择</a-button>
              </div>
            </div>
          </div>
        </div>
      </a-card>
    </div>
    
    <!-- 返回选择按钮 -->
    <div class="back-button-container" v-if="selectedPosition">
      <a-button type="outline" @click="resetPosition">
        <template #icon><IconLeft /></template>
        返回职位选择
      </a-button>
    </div>
    
    <!-- 用户学习数据概览 -->
    <div class="overview-container" v-if="selectedPosition">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-card class="overview-card">
            <h3 class="section-title">
              <IconClockCircle class="section-icon" />
              学习进度概览
            </h3>
            
            <!-- 统计数字 -->
            <a-row :gutter="16" class="stats-row">
              <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <div class="stat-card">
                  <div class="stat-value">{{ userStats.completedProblems }}</div>
                  <div class="stat-label">已完成题目</div>
                </div>
              </a-col>
              <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <div class="stat-card">
                  <div class="stat-value">{{ userStats.studyDays }}</div>
                  <div class="stat-label">学习天数</div>
                </div>
              </a-col>
              <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <div class="stat-card">
                  <div class="stat-value">{{ userStats.streak }}</div>
                  <div class="stat-label">连续学习</div>
                </div>
              </a-col>
              <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <div class="stat-card">
                  <div class="stat-value">{{ userStats.ranking }}</div>
                  <div class="stat-label">学习排名</div>
                </div>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </div>
    
    <!-- 学习计划推荐 -->
    <div class="plan-container" v-if="selectedPosition">
      <h3 class="section-title">
        <IconBook class="section-icon" />
        为您推荐的{{ getPositionName(selectedPosition) }}学习计划
      </h3>
      
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" title="短期计划 (1周)">
          <a-row :gutter="16">
            <a-col :span="8" v-for="(plan, index) in shortTermPlans" :key="'short-' + index">
              <a-card class="plan-card" :hoverable="true">
                <template #cover>
                  <div class="plan-cover" :style="{ backgroundColor: plan.color }">
                    <div class="plan-icon">
                      <component :is="plan.icon"></component>
                    </div>
                    <div class="plan-difficulty">
                      <a-tag :color="getDifficultyColor(plan.difficulty)">
                        {{ plan.difficulty }}
                      </a-tag>
                    </div>
                  </div>
                </template>
                <a-card-meta :title="plan.title">
                  <template #description>
                    <div class="plan-description">
                      <p>{{ plan.description }}</p>
                      <div class="plan-tags">
                        <a-tag v-for="tag in plan.tags" :key="tag" size="small">{{ tag }}</a-tag>
                      </div>
                    </div>
                  </template>
                </a-card-meta>
                <div class="plan-progress">
                  <div class="progress-text">
                    <span>进度</span>
                    <span>{{ plan.progress }}%</span>
                  </div>
                  <a-progress :percent="plan.progress" :stroke-color="plan.color" size="small" :show-text="false" />
                </div>
                <div class="plan-actions">
                  <a-button type="primary" shape="round">开始学习</a-button>
                  <a-button shape="round">查看详情</a-button>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
        
        <a-tab-pane key="2" title="中期计划 (1个月)">
          <a-row :gutter="16">
            <a-col :span="8" v-for="(plan, index) in mediumTermPlans" :key="'medium-' + index">
              <a-card class="plan-card" :hoverable="true">
                <template #cover>
                  <div class="plan-cover" :style="{ backgroundColor: plan.color }">
                    <div class="plan-icon">
                      <component :is="plan.icon"></component>
                    </div>
                    <div class="plan-difficulty">
                      <a-tag :color="getDifficultyColor(plan.difficulty)">
                        {{ plan.difficulty }}
                      </a-tag>
                    </div>
                  </div>
                </template>
                <a-card-meta :title="plan.title">
                  <template #description>
                    <div class="plan-description">
                      <p>{{ plan.description }}</p>
                      <div class="plan-tags">
                        <a-tag v-for="tag in plan.tags" :key="tag" size="small">{{ tag }}</a-tag>
                      </div>
                    </div>
                  </template>
                </a-card-meta>
                <div class="plan-progress">
                  <div class="progress-text">
                    <span>进度</span>
                    <span>{{ plan.progress }}%</span>
                  </div>
                  <a-progress :percent="plan.progress" :stroke-color="plan.color" size="small" :show-text="false" />
                </div>
                <div class="plan-actions">
                  <a-button type="primary" shape="round">开始学习</a-button>
                  <a-button shape="round">查看详情</a-button>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
        
        <a-tab-pane key="3" title="长期计划 (3个月+)">
          <a-row :gutter="16">
            <a-col :span="8" v-for="(plan, index) in longTermPlans" :key="'long-' + index">
              <a-card class="plan-card" :hoverable="true">
                <template #cover>
                  <div class="plan-cover" :style="{ backgroundColor: plan.color }">
                    <div class="plan-icon">
                      <component :is="plan.icon"></component>
                    </div>
                    <div class="plan-difficulty">
                      <a-tag :color="getDifficultyColor(plan.difficulty)">
                        {{ plan.difficulty }}
                      </a-tag>
                    </div>
                  </div>
                </template>
                <a-card-meta :title="plan.title">
                  <template #description>
                    <div class="plan-description">
                      <p>{{ plan.description }}</p>
                      <div class="plan-tags">
                        <a-tag v-for="tag in plan.tags" :key="tag" size="small">{{ tag }}</a-tag>
                      </div>
                    </div>
                  </template>
                </a-card-meta>
                <div class="plan-progress">
                  <div class="progress-text">
                    <span>进度</span>
                    <span>{{ plan.progress }}%</span>
                  </div>
                  <a-progress :percent="plan.progress" :stroke-color="plan.color" size="small" :show-text="false" />
                </div>
                <div class="plan-actions">
                  <a-button type="primary" shape="round">开始学习</a-button>
                  <a-button shape="round">查看详情</a-button>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </div>
    
    <!-- 学习路径推荐 -->
    <div class="learning-path-container" v-if="selectedPosition">
      <h3 class="section-title">
        <IconMindMapping class="section-icon" />
        {{ getPositionName(selectedPosition) }}学习路径
      </h3>
      
      <a-card class="learning-path-card">
        <div class="learning-path-header">
          <div class="path-description">
            <p>根据您的学习情况和职业方向，我们为您定制了以下学习路径，帮助您系统性地提升技能。</p>
          </div>
          <div class="path-legend">
            <div class="legend-item">
              <div class="legend-color" style="background-color: #67C23A;"></div>
              <span>已掌握</span>
            </div>
            <div class="legend-item">
              <div class="legend-color" style="background-color: #E6A23C;"></div>
              <span>学习中</span>
            </div>
            <div class="legend-item">
              <div class="legend-color" style="background-color: #909399;"></div>
              <span>未开始</span>
            </div>
          </div>
        </div>
        
        <div class="learning-path-steps">
          <!-- 阶段1 -->
          <div class="path-stage">
            <div class="stage-header">
              <div class="stage-dot completed"></div>
              <div class="stage-title">基础阶段</div>
              <div class="stage-progress">
                <div class="progress-text">
                  <span>进度</span>
                  <span>100%</span>
                </div>
                <a-progress :percent="100" status="success" size="small" :show-text="false" />
              </div>
            </div>
            <div class="stage-content">
              <div class="stage-skills">
                <a-tag color="green" v-for="skill in getBasicSkills(selectedPosition)" :key="skill">{{ skill }}</a-tag>
              </div>
              <div class="stage-description">
                掌握{{ getPositionName(selectedPosition) }}的基础知识和核心概念，为进阶学习打下坚实基础。
              </div>
            </div>
          </div>
          
          <!-- 连接线 -->
          <div class="path-connector">
            <div class="connector-line"></div>
            <div class="connector-arrow"></div>
          </div>
          
          <!-- 阶段2 -->
          <div class="path-stage">
            <div class="stage-header">
              <div class="stage-dot in-progress"></div>
              <div class="stage-title">进阶阶段</div>
              <div class="stage-progress">
                <div class="progress-text">
                  <span>进度</span>
                  <span>60%</span>
                </div>
                <a-progress :percent="60" status="normal" size="small" :show-text="false" />
              </div>
            </div>
            <div class="stage-content">
              <div class="stage-skills">
                <a-tag color="orange" v-for="skill in getIntermediateSkills(selectedPosition)" :key="skill">{{ skill }}</a-tag>
              </div>
              <div class="stage-description">
                深入学习{{ getPositionName(selectedPosition) }}的进阶技能和实践方法，提升解决复杂问题的能力。
              </div>
            </div>
          </div>
          
          <!-- 连接线 -->
          <div class="path-connector">
            <div class="connector-line"></div>
            <div class="connector-arrow"></div>
          </div>
          
          <!-- 阶段3 -->
          <div class="path-stage">
            <div class="stage-header">
              <div class="stage-dot not-started"></div>
              <div class="stage-title">高级阶段</div>
              <div class="stage-progress">
                <div class="progress-text">
                  <span>进度</span>
                  <span>10%</span>
                </div>
                <a-progress :percent="10" status="normal" size="small" :show-text="false" />
              </div>
            </div>
            <div class="stage-content">
              <div class="stage-skills">
                <a-tag color="gray" v-for="skill in getAdvancedSkills(selectedPosition)" :key="skill">{{ skill }}</a-tag>
              </div>
              <div class="stage-description">
                掌握{{ getPositionName(selectedPosition) }}的高级技能和最佳实践，成为该领域的专家。
              </div>
            </div>
          </div>
          
          <!-- 连接线 -->
          <div class="path-connector">
            <div class="connector-line"></div>
            <div class="connector-arrow"></div>
          </div>
          
          <!-- 阶段4 -->
          <div class="path-stage">
            <div class="stage-header">
              <div class="stage-dot not-started"></div>
              <div class="stage-title">专家阶段</div>
              <div class="stage-progress">
                <div class="progress-text">
                  <span>进度</span>
                  <span>0%</span>
                </div>
                <a-progress :percent="0" status="normal" size="small" :show-text="false" />
              </div>
            </div>
            <div class="stage-content">
              <div class="stage-skills">
                <a-tag color="gray" v-for="skill in getExpertSkills(selectedPosition)" :key="skill">{{ skill }}</a-tag>
              </div>
              <div class="stage-description">
                探索{{ getPositionName(selectedPosition) }}的前沿技术和创新方向，引领行业发展。
              </div>
            </div>
          </div>
        </div>
        
        <div class="learning-path-actions">
          <a-button type="primary">查看详细学习计划</a-button>
          <a-button>下载学习路径</a-button>
        </div>
      </a-card>
    </div>
    
    <!-- 推荐题目列表 -->
    <div class="recommended-problems-container" v-if="selectedPosition">
      
      <a-card>
        <a-table :data="getRecommendedProblemsByPosition(selectedPosition)" :pagination="false">
          <a-table-column title="题目ID" data-index="id" />
          <a-table-column title="题目名称" data-index="title">
            <template #cell="{ record }">
              <a href="javascript:void(0)">{{ record.title }}</a>
            </template>
          </a-table-column>
          <a-table-column title="难度" data-index="difficulty">
            <template #cell="{ record }">
              <a-tag :color="getDifficultyColor(record.difficulty)">
                {{ record.difficulty }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="标签" data-index="tags">
            <template #cell="{ record }">
              <a-space>
                <a-tag v-for="tag in record.tags" :key="tag" size="small">{{ tag }}</a-tag>
              </a-space>
            </template>
          </a-table-column>
          <a-table-column title="推荐理由" data-index="reason" />
          <a-table-column title="操作">
            <template #cell>
              <a-button type="primary" size="small">开始做题</a-button>
            </template>
          </a-table-column>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
import * as echarts from 'echarts';
import { 
  IconCodeSquare, 
  IconComputer, 
  IconSave, 
  IconStorage, 
  IconBug,
  IconLeft,
  IconRight,
  IconCalendar,
  IconBook,
  IconFile,
  IconEdit,
  IconCheck,
  IconClockCircle,
  IconMindMapping,
  IconCodeBlock
} from '@arco-design/web-vue/es/icon';

// 图表引用
const tagDistributionChart = ref<HTMLElement | null>(null);
const learningPathChart = ref<HTMLElement | null>(null);
const progressChart = ref<HTMLElement | null>(null);
const weeklyProgressChart = ref<HTMLElement | null>(null);
const completionRateChart = ref<HTMLElement | null>(null);
const difficultyDistributionChart = ref<HTMLElement | null>(null);
const studyCalendarChart = ref<HTMLElement | null>(null);
const monthlyProgressChart = ref<HTMLElement | null>(null);
const completionStatusChart = ref<HTMLElement | null>(null);
const userTrendChart = ref<HTMLElement | null>(null);

// 图表实例
let tagChartInstance: echarts.ECharts | null = null;
let pathChartInstance: echarts.ECharts | null = null;
let progressChartInstance: echarts.ECharts | null = null;
let weeklyProgressChartInstance: echarts.ECharts | null = null;
let completionRateChartInstance: echarts.ECharts | null = null;
let difficultyDistributionChartInstance: echarts.ECharts | null = null;
let studyCalendarChartInstance: echarts.ECharts | null = null;
let monthlyProgressChartInstance: echarts.ECharts | null = null;
let completionStatusChartInstance: echarts.ECharts | null = null;
let userTrendChartInstance: echarts.ECharts | null = null;

// 职位选择
const selectedPosition = ref('');

// 模拟用户已完成的题目数据
const completedProblems = ref([
  { id: 1, title: '两数之和', tags: ['算法', '数组', '哈希表'], difficulty: '简单' },
  { id: 2, title: '三数之和', tags: ['算法', '数组', '双指针'], difficulty: '中等' },
  { id: 3, title: '最长回文子串', tags: ['算法', '字符串', '动态规划'], difficulty: '中等' },
  { id: 4, title: '合并两个有序链表', tags: ['算法', '链表'], difficulty: '简单' },
  { id: 5, title: '数据库连接池实现', tags: ['数据库', '后端'], difficulty: '中等' },
  { id: 6, title: 'React 组件生命周期', tags: ['前端', 'React'], difficulty: '中等' },
  { id: 7, title: 'Vue 响应式原理', tags: ['前端', 'Vue'], difficulty: '困难' },
  { id: 8, title: 'Spring Boot 自动配置', tags: ['后端', 'Java'], difficulty: '中等' },
  { id: 9, title: '单元测试最佳实践', tags: ['测试', '后端'], difficulty: '简单' },
]);

// 用户学习统计数据
const userStats = ref({
  completedProblems: 42,
  studyDays: 28,
  streak: 7,
  ranking: 15
});

// 定义各职位方向的学习计划
const positionPlans = {
  // 算法方向学习计划
  algorithm: {
    shortTerm: [
      {
        title: '数据结构基础',
        description: '掌握数组、链表、栈、队列等基础数据结构',
        tags: ['算法', '数据结构', '基础'],
        difficulty: '简单',
        progress: 45,
        color: '#165DFF',
        icon: 'IconCodeSquare'
      },
      {
        title: '排序算法专题',
        description: '学习常见排序算法及其时间复杂度分析',
        tags: ['算法', '排序', '复杂度分析'],
        difficulty: '中等',
        progress: 30,
        color: '#0FC6C2',
        icon: 'IconSortAscending'
      },
      {
        title: '查找算法入门',
        description: '掌握二分查找等常见查找算法',
        tags: ['算法', '查找', '二分法'],
        difficulty: '简单',
        progress: 20,
        color: '#722ED1',
        icon: 'IconSearch'
      }
    ],
    mediumTerm: [
      {
        title: '动态规划入门',
        description: '学习动态规划的基本思想和常见应用',
        tags: ['算法', '动态规划', 'DP'],
        difficulty: '中等',
        progress: 10,
        color: '#F7BA1E',
        icon: 'IconBranch'
      },
      {
        title: '图论算法',
        description: '掌握图的表示和常见图论算法',
        tags: ['算法', '图论', 'BFS/DFS'],
        difficulty: '困难',
        progress: 5,
        color: '#FF7D00',
        icon: 'IconMindMapping'
      },
      {
        title: '贪心算法',
        description: '学习贪心策略及其适用场景',
        tags: ['算法', '贪心', '最优化'],
        difficulty: '中等',
        progress: 15,
        color: '#0057D9',
        icon: 'IconBulb'
      }
    ],
    longTerm: [
      {
        title: '高级算法与数据结构',
        description: '学习高级数据结构如线段树、树状数组等',
        tags: ['算法', '高级数据结构', '竞赛'],
        difficulty: '困难',
        progress: 0,
        color: '#F74A3F',
        icon: 'IconTrophy'
      },
      {
        title: '算法设计与分析',
        description: '系统学习算法设计范式和复杂度分析',
        tags: ['算法', '算法分析', '设计技巧'],
        difficulty: '困难',
        progress: 0,
        color: '#16CA10',
        icon: 'IconExperiment'
      },
      {
        title: 'NP完全性理论',
        description: '了解计算复杂性理论和NP完全问题',
        tags: ['算法', '复杂性理论', 'NP完全'],
        difficulty: '困难',
        progress: 0,
        color: '#86909C',
        icon: 'IconRobot'
      }
    ]
  },
  
  // 前端方向学习计划
  frontend: {
    shortTerm: [
      {
        title: 'HTML/CSS基础',
        description: '掌握前端页面结构和样式的基础知识',
        tags: ['前端', 'HTML', 'CSS'],
        difficulty: '简单',
        progress: 60,
        color: '#FF7D00',
        icon: 'IconCode'
      },
      {
        title: 'JavaScript核心概念',
        description: '学习JS语言特性、DOM操作和事件处理',
        tags: ['前端', 'JavaScript', 'DOM'],
        difficulty: '中等',
        progress: 40,
        color: '#F7BA1E',
        icon: 'IconCodeSquare'
      },
      {
        title: '响应式布局设计',
        description: '掌握媒体查询和弹性布局技术',
        tags: ['前端', 'CSS', '响应式设计'],
        difficulty: '中等',
        progress: 25,
        color: '#41B883',
        icon: 'IconMobile'
      }
    ],
    mediumTerm: [
      {
        title: 'Vue框架入门',
        description: '学习Vue的核心概念和组件化开发',
        tags: ['前端', 'Vue', '组件化'],
        difficulty: '中等',
        progress: 30,
        color: '#41B883',
        icon: 'IconApps'
      },
      {
        title: 'React框架基础',
        description: '掌握React的JSX语法和组件生命周期',
        tags: ['前端', 'React', 'JSX'],
        difficulty: '中等',
        progress: 15,
        color: '#61DAFB',
        icon: 'IconRelation'
      },
      {
        title: '前端工程化',
        description: '学习Webpack、Babel等构建工具的使用',
        tags: ['前端', '工程化', 'Webpack'],
        difficulty: '中等',
        progress: 10,
        color: '#0057D9',
        icon: 'IconCommon'
      }
    ],
    longTerm: [
      {
        title: '前端性能优化',
        description: '学习前端应用性能分析与优化技术',
        tags: ['前端', '性能优化', '用户体验'],
        difficulty: '困难',
        progress: 5,
        color: '#165DFF',
        icon: 'IconSpeedometer'
      },
      {
        title: '现代前端架构',
        description: '学习微前端、服务端渲染等架构模式',
        tags: ['前端', '架构', 'SSR'],
        difficulty: '困难',
        progress: 0,
        color: '#722ED1',
        icon: 'IconLayers'
      },
      {
        title: 'WebAssembly应用',
        description: '探索WebAssembly在前端的应用场景',
        tags: ['前端', 'WebAssembly', '高性能'],
        difficulty: '困难',
        progress: 0,
        color: '#F74A3F',
        icon: 'IconRobot'
      }
    ]
  },
  
  // 后端方向学习计划
  backend: {
    shortTerm: [
      {
        title: 'Java基础与面向对象',
        description: '掌握Java语言基础和面向对象编程思想',
        tags: ['后端', 'Java', 'OOP'],
        difficulty: '简单',
        progress: 50,
        color: '#F74A3F',
        icon: 'IconJava'
      },
      {
        title: 'Spring框架入门',
        description: '学习Spring IoC和AOP的核心概念',
        tags: ['后端', 'Spring', '依赖注入'],
        difficulty: '中等',
        progress: 35,
        color: '#16CA10',
        icon: 'IconBranch'
      },
      {
        title: 'RESTful API设计',
        description: '掌握REST架构风格和API设计最佳实践',
        tags: ['后端', 'API', 'REST'],
        difficulty: '中等',
        progress: 40,
        color: '#0FC6C2',
        icon: 'IconApi'
      }
    ],
    mediumTerm: [
      {
        title: '数据库设计与优化',
        description: '学习关系型数据库设计和查询优化',
        tags: ['后端', '数据库', 'SQL优化'],
        difficulty: '中等',
        progress: 20,
        color: '#0057D9',
        icon: 'IconStorage'
      },
      {
        title: '分布式系统基础',
        description: '了解分布式系统的核心概念和挑战',
        tags: ['后端', '分布式', '系统设计'],
        difficulty: '困难',
        progress: 10,
        color: '#722ED1',
        icon: 'IconCluster'
      },
      {
        title: '消息队列应用',
        description: '学习消息队列在异步处理中的应用',
        tags: ['后端', '消息队列', '异步处理'],
        difficulty: '中等',
        progress: 15,
        color: '#F7BA1E',
        icon: 'IconSwap'
      }
    ],
    longTerm: [
      {
        title: '微服务架构',
        description: '学习微服务设计原则和实现技术',
        tags: ['后端', '微服务', '架构'],
        difficulty: '困难',
        progress: 5,
        color: '#165DFF',
        icon: 'IconApps'
      },
      {
        title: '云原生应用开发',
        description: '掌握容器化和Kubernetes编排技术',
        tags: ['后端', '云原生', 'K8s'],
        difficulty: '困难',
        progress: 0,
        color: '#41B883',
        icon: 'IconCloud'
      },
      {
        title: '高并发系统设计',
        description: '学习高并发、高可用系统设计原则',
        tags: ['后端', '高并发', '系统设计'],
        difficulty: '困难',
        progress: 0,
        color: '#FF7D00',
        icon: 'IconThunderbolt'
      }
    ]
  },
  
  // 数据库方向学习计划
  database: {
    shortTerm: [
      {
        title: 'SQL基础',
        description: '掌握SQL语言和关系型数据库基础',
        tags: ['数据库', 'SQL', '关系型'],
        difficulty: '简单',
        progress: 55,
        color: '#0057D9',
        icon: 'IconStorage'
      },
      {
        title: '数据库设计',
        description: '学习ER模型和数据库范式理论',
        tags: ['数据库', '设计', '范式'],
        difficulty: '中等',
        progress: 30,
        color: '#722ED1',
        icon: 'IconRelation'
      },
      {
        title: '索引与查询优化',
        description: '掌握索引原理和SQL查询优化技术',
        tags: ['数据库', '索引', '性能优化'],
        difficulty: '中等',
        progress: 25,
        color: '#F7BA1E',
        icon: 'IconSpeedometer'
      }
    ],
    mediumTerm: [
      {
        title: 'NoSQL数据库',
        description: '学习MongoDB等文档型数据库的应用',
        tags: ['数据库', 'NoSQL', 'MongoDB'],
        difficulty: '中等',
        progress: 15,
        color: '#16CA10',
        icon: 'IconFile'
      },
      {
        title: '数据库事务与并发',
        description: '深入理解事务ACID特性和并发控制',
        tags: ['数据库', '事务', '并发控制'],
        difficulty: '困难',
        progress: 10,
        color: '#F74A3F',
        icon: 'IconSwap'
      },
      {
        title: '数据库备份与恢复',
        description: '学习数据库容灾和恢复策略',
        tags: ['数据库', '备份', '容灾'],
        difficulty: '中等',
        progress: 20,
        color: '#0FC6C2',
        icon: 'IconUndo'
      }
    ],
    longTerm: [
      {
        title: '分布式数据库',
        description: '学习分布式数据库架构和实现原理',
        tags: ['数据库', '分布式', '架构'],
        difficulty: '困难',
        progress: 5,
        color: '#165DFF',
        icon: 'IconCluster'
      },
      {
        title: '数据仓库与OLAP',
        description: '掌握数据仓库设计和联机分析处理',
        tags: ['数据库', '数据仓库', 'OLAP'],
        difficulty: '困难',
        progress: 0,
        color: '#FF7D00',
        icon: 'IconBarChart'
      },
      {
        title: '数据库内核开发',
        description: '深入学习数据库存储引擎和查询优化器',
        tags: ['数据库', '内核', '存储引擎'],
        difficulty: '困难',
        progress: 0,
        color: '#86909C',
        icon: 'IconCodeBlock'
      }
    ]
  },
  
  // 测试方向学习计划
  testing: {
    shortTerm: [
      {
        title: '测试基础理论',
        description: '了解软件测试的基本概念和方法',
        tags: ['测试', '基础', '测试方法'],
        difficulty: '简单',
        progress: 65,
        color: '#722ED1',
        icon: 'IconBug'
      },
      {
        title: '单元测试实践',
        description: '学习JUnit等单元测试框架的使用',
        tags: ['测试', '单元测试', 'JUnit'],
        difficulty: '简单',
        progress: 45,
        color: '#F74A3F',
        icon: 'IconCodeSquare'
      },
      {
        title: '接口测试',
        description: '掌握Postman等API测试工具的使用',
        tags: ['测试', 'API测试', 'Postman'],
        difficulty: '中等',
        progress: 30,
        color: '#0FC6C2',
        icon: 'IconApi'
      }
    ],
    mediumTerm: [
      {
        title: '自动化测试',
        description: '学习Selenium等自动化测试工具',
        tags: ['测试', '自动化', 'Selenium'],
        difficulty: '中等',
        progress: 20,
        color: '#16CA10',
        icon: 'IconRobot'
      },
      {
        title: '性能测试',
        description: '掌握JMeter等性能测试工具的使用',
        tags: ['测试', '性能测试', 'JMeter'],
        difficulty: '中等',
        progress: 15,
        color: '#F7BA1E',
        icon: 'IconSpeedometer'
      },
      {
        title: '测试驱动开发',
        description: '学习TDD方法论和实践技巧',
        tags: ['测试', 'TDD', '敏捷开发'],
        difficulty: '中等',
        progress: 10,
        color: '#0057D9',
        icon: 'IconBulb'
      }
    ],
    longTerm: [
      {
        title: '测试架构设计',
        description: '学习大型项目的测试架构设计',
        tags: ['测试', '架构', '测试框架'],
        difficulty: '困难',
        progress: 5,
        color: '#165DFF',
        icon: 'IconLayers'
      },
      {
        title: '安全测试',
        description: '掌握渗透测试和安全漏洞检测技术',
        tags: ['测试', '安全测试', '渗透测试'],
        difficulty: '困难',
        progress: 0,
        color: '#FF7D00',
        icon: 'IconLock'
      },
      {
        title: '测试管理与质量保证',
        description: '学习测试团队管理和质量保证体系',
        tags: ['测试', '测试管理', '质量保证'],
        difficulty: '困难',
        progress: 0,
        color: '#86909C',
        icon: 'IconUserGroup'
      }
    ]
  }
};

// 职位选项
const positions = [
  {
    value: 'algorithm',
    name: '算法',
    description: '掌握数据结构与算法，提高编程能力和解决复杂问题的能力',
    icon: 'IconCodeSquare'
  },
  {
    value: 'frontend',
    name: '前端开发',
    description: '学习HTML、CSS、JavaScript及主流前端框架，构建用户友好的界面',
    icon: 'IconComputer'
  },
  {
    value: 'backend',
    name: '后端开发',
    description: '掌握服务器端编程、API设计、数据处理和系统架构',
    icon: 'IconSave'
  },
  {
    value: 'database',
    name: '数据库',
    description: '学习数据库设计、优化和管理，处理大规模数据存储与查询',
    icon: 'IconStorage'
  },
  {
    value: 'testing',
    name: '测试',
    description: '掌握软件测试方法、自动化测试工具和质量保证流程',
    icon: 'IconBug'
  }
];

// 根据职位获取短期学习计划
const shortTermPlans = computed(() => {
  return positionPlans[selectedPosition.value as keyof typeof positionPlans]?.shortTerm || [];
});

// 根据职位获取中期学习计划
const mediumTermPlans = computed(() => {
  return positionPlans[selectedPosition.value as keyof typeof positionPlans]?.mediumTerm || [];
});

// 根据职位获取长期学习计划
const longTermPlans = computed(() => {
  return positionPlans[selectedPosition.value as keyof typeof positionPlans]?.longTerm || [];
});

// 推荐题目
const recommendedProblems = [
  {
    id: 'P1001',
    title: '二叉树的层序遍历',
    difficulty: '中等',
    tags: ['算法', '二叉树', 'BFS'],
    reason: '根据您解决的算法题目，建议学习树相关算法'
  },
  {
    id: 'P1002',
    title: 'Vue3 组件通信方式',
    difficulty: '中等',
    tags: ['前端', 'Vue', '组件'],
    reason: '基于您对Vue的兴趣，推荐深入学习组件通信'
  },
  {
    id: 'P1003',
    title: 'MySQL索引优化案例',
    difficulty: '中等',
    tags: ['数据库', 'MySQL', '性能优化'],
    reason: '补充您在数据库方面的知识'
  },
  {
    id: 'P1004',
    title: 'RESTful API设计最佳实践',
    difficulty: '简单',
    tags: ['后端', 'API设计', 'REST'],
    reason: '增强您的后端API设计能力'
  },
  {
    id: 'P1005',
    title: 'Jest单元测试实战',
    difficulty: '简单',
    tags: ['测试', '前端', 'Jest'],
    reason: '提升您的测试技能，与前端知识结合'
  }
];

// 获取难度对应的颜色
const getDifficultyColor = (difficulty: string): string => {
  switch (difficulty) {
    case '简单':
      return 'green';
    case '中等':
      return 'blue';
    case '困难':
      return 'red';
    default:
      return 'default';
  }
};

// 获取职位名称
const getPositionName = (position: string): string => {
  switch (position) {
    case 'algorithm':
      return '算法';
    case 'frontend':
      return '前端开发';
    case 'backend':
      return '后端开发';
    case 'database':
      return '数据库';
    case 'testing':
      return '测试';
    default:
      return '';
  }
};

// 获取指定职位的已完成题目
const getCompletedProblemsByPosition = (position: string): any[] => {
  switch (position) {
    case 'algorithm':
      return completedProblems.value.filter(problem => problem.tags.includes('算法'));
    case 'frontend':
      return completedProblems.value.filter(problem => problem.tags.includes('前端'));
    case 'backend':
      return completedProblems.value.filter(problem => problem.tags.includes('后端'));
    case 'database':
      return completedProblems.value.filter(problem => problem.tags.includes('数据库'));
    case 'testing':
      return completedProblems.value.filter(problem => problem.tags.includes('测试'));
    default:
      return [];
  }
};

// 获取指定职位的推荐题目
const getRecommendedProblemsByPosition = (position: string): any[] => {
  switch (position) {
    case 'algorithm':
      return recommendedProblems.filter(problem => problem.tags.includes('算法'));
    case 'frontend':
      return recommendedProblems.filter(problem => problem.tags.includes('前端'));
    case 'backend':
      return recommendedProblems.filter(problem => problem.tags.includes('后端'));
    case 'database':
      return recommendedProblems.filter(problem => problem.tags.includes('数据库'));
    case 'testing':
      return recommendedProblems.filter(problem => problem.tags.includes('测试'));
    default:
      return [];
  }
};

// 获取图标组件
const getIconComponent = (iconName: string) => {
  const iconMap: Record<string, any> = {
    'IconCodeSquare': IconCodeSquare,
    'IconComputer': IconComputer,
    'IconSave': IconSave,
    'IconStorage': IconStorage,
    'IconBug': IconBug
  };
  return iconMap[iconName] || IconCodeSquare;
};

// 获取基础技能
const getBasicSkills = (position: string): string[] => {
  switch (position) {
    case 'algorithm':
      return ['数据结构', '算法基础', '编程语言'];
    case 'frontend':
      return ['HTML', 'CSS', 'JavaScript'];
    case 'backend':
      return ['Java', 'Spring', '数据库'];
    case 'database':
      return ['SQL', '数据库设计', '数据存储'];
    case 'testing':
      return ['测试基础', '单元测试', 'API测试'];
    default:
      return [];
  }
};

// 获取中级技能
const getIntermediateSkills = (position: string): string[] => {
  switch (position) {
    case 'algorithm':
      return ['动态规划', '图论', '贪心算法'];
    case 'frontend':
      return ['Vue', 'React', '前端工程化'];
    case 'backend':
      return ['Spring Boot', 'RESTful API', '消息队列'];
    case 'database':
      return ['NoSQL数据库', '数据库事务', '索引优化'];
    case 'testing':
      return ['自动化测试', '性能测试', '测试驱动开发'];
    default:
      return [];
  }
};

// 获取高级技能
const getAdvancedSkills = (position: string): string[] => {
  switch (position) {
    case 'algorithm':
      return ['高级数据结构', '算法设计', 'NP完全性理论'];
    case 'frontend':
      return ['前端性能优化', '现代前端架构', 'WebAssembly'];
    case 'backend':
      return ['微服务架构', '云原生应用', '高并发系统设计'];
    case 'database':
      return ['分布式数据库', '数据仓库', '数据库内核开发'];
    case 'testing':
      return ['测试架构设计', '安全测试', '测试管理与质量保证'];
    default:
      return [];
  }
};

// 获取专家技能
const getExpertSkills = (position: string): string[] => {
  switch (position) {
    case 'algorithm':
      return ['算法竞赛', '高级数据结构', '复杂性理论'];
    case 'frontend':
      return ['前端架构设计', 'WebAssembly应用', '高性能渲染'];
    case 'backend':
      return ['微服务设计', '云原生应用开发', '高并发系统架构'];
    case 'database':
      return ['分布式数据库设计', '数据仓库设计', '数据库内核开发'];
    case 'testing':
      return ['测试架构设计', '安全测试', '测试管理与质量保证'];
    default:
      return [];
  }
};

// 初始化标签分布图表
const initTagDistributionChart = () => {
  if (tagDistributionChart.value) {
    tagChartInstance = echarts.init(tagDistributionChart.value);
    updateTagChart();
  }
};

// 更新标签分布图表数据
const updateTagChart = () => {
  if (!tagChartInstance) return;
  
  // 获取当前选择职位的已完成题目
  const filteredProblems = getCompletedProblemsByPosition(selectedPosition.value);
  
  // 统计标签分布
  const tagCounts: Record<string, number> = {};
  filteredProblems.forEach(problem => {
    problem.tags.forEach((tag: string) => {
      tagCounts[tag] = (tagCounts[tag] || 0) + 1;
    });
  });
  
  const data = Object.entries(tagCounts).map(([name, value]) => ({ name, value }));
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      data: Object.keys(tagCounts)
    },
    series: [
      {
        name: '题目标签分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'right'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        data: data
      }
    ]
  };
  
  tagChartInstance.setOption(option);
};

// 初始化学习路径图表
const initLearningPathChart = () => {
  if (learningPathChart.value) {
    pathChartInstance = echarts.init(learningPathChart.value);
    updatePathChart();
  }
};

// 更新学习路径图表数据
const updatePathChart = () => {
  if (!pathChartInstance) return;
  
  // 根据职位选择不同的学习路径数据
  let nodes = [];
  let links = [];
  
  switch (selectedPosition.value) {
    case 'algorithm':
      nodes = [
        { name: '数据结构基础', value: 10, category: 0, symbolSize: 50, itemStyle: { color: '#165DFF' } },
        { name: '排序算法', value: 8, category: 0, symbolSize: 40, itemStyle: { color: '#165DFF' } },
        { name: '查找算法', value: 7, category: 0, symbolSize: 35, itemStyle: { color: '#165DFF' } },
        { name: '动态规划', value: 9, category: 1, symbolSize: 45, itemStyle: { color: '#F7BA1E' } },
        { name: '图论算法', value: 6, category: 1, symbolSize: 30, itemStyle: { color: '#F7BA1E' } },
        { name: '贪心算法', value: 5, category: 1, symbolSize: 25, itemStyle: { color: '#F7BA1E' } },
        { name: '高级数据结构', value: 4, category: 2, symbolSize: 20, itemStyle: { color: '#F74A3F' } },
        { name: '算法设计', value: 3, category: 2, symbolSize: 15, itemStyle: { color: '#F74A3F' } }
      ];
      links = [
        { source: '数据结构基础', target: '排序算法', value: 5 },
        { source: '数据结构基础', target: '查找算法', value: 4 },
        { source: '排序算法', target: '动态规划', value: 3 },
        { source: '查找算法', target: '动态规划', value: 2 },
        { source: '动态规划', target: '图论算法', value: 4 },
        { source: '动态规划', target: '贪心算法', value: 3 },
        { source: '图论算法', target: '高级数据结构', value: 3 },
        { source: '贪心算法', target: '算法设计', value: 2 },
        { source: '高级数据结构', target: '算法设计', value: 3 }
      ];
      break;
    case 'frontend':
      nodes = [
        { name: 'HTML/CSS基础', value: 10, category: 0, symbolSize: 50, itemStyle: { color: '#FF7D00' } },
        { name: 'JavaScript基础', value: 9, category: 0, symbolSize: 45, itemStyle: { color: '#FF7D00' } },
        { name: '响应式设计', value: 7, category: 0, symbolSize: 35, itemStyle: { color: '#FF7D00' } },
        { name: 'Vue框架', value: 8, category: 1, symbolSize: 40, itemStyle: { color: '#41B883' } },
        { name: 'React框架', value: 6, category: 1, symbolSize: 30, itemStyle: { color: '#61DAFB' } },
        { name: '前端工程化', value: 5, category: 1, symbolSize: 25, itemStyle: { color: '#0057D9' } },
        { name: '性能优化', value: 4, category: 2, symbolSize: 20, itemStyle: { color: '#165DFF' } },
        { name: '现代前端架构', value: 3, category: 2, symbolSize: 15, itemStyle: { color: '#722ED1' } }
      ];
      links = [
        { source: 'HTML/CSS基础', target: 'JavaScript基础', value: 5 },
        { source: 'HTML/CSS基础', target: '响应式设计', value: 4 },
        { source: 'JavaScript基础', target: 'Vue框架', value: 4 },
        { source: 'JavaScript基础', target: 'React框架', value: 4 },
        { source: '响应式设计', target: 'Vue框架', value: 3 },
        { source: '响应式设计', target: 'React框架', value: 3 },
        { source: 'Vue框架', target: '前端工程化', value: 4 },
        { source: 'React框架', target: '前端工程化', value: 4 },
        { source: '前端工程化', target: '性能优化', value: 3 },
        { source: '性能优化', target: '现代前端架构', value: 2 }
      ];
      break;
    // 其他职位类似...
    default:
      nodes = [
        { name: '基础知识', value: 10, category: 0, symbolSize: 50, itemStyle: { color: '#165DFF' } },
        { name: '进阶技能', value: 8, category: 1, symbolSize: 40, itemStyle: { color: '#41B883' } },
        { name: '专业领域', value: 6, category: 2, symbolSize: 30, itemStyle: { color: '#F74A3F' } }
      ];
      links = [
        { source: '基础知识', target: '进阶技能', value: 5 },
        { source: '进阶技能', target: '专业领域', value: 3 }
      ];
  }
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    },
    series: [
      {
        type: 'graph',
        layout: 'force',
        roam: true,
        label: {
          show: true,
          position: 'right'
        },
        force: {
          repulsion: 100,
          edgeLength: 80
        },
        data: nodes,
        links: links,
        lineStyle: {
          color: 'source',
          curveness: 0.3
        }
      }
    ]
  };
  
  pathChartInstance.setOption(option);
};

// 初始化进度图表
const initProgressChart = () => {
  if (progressChart.value) {
    progressChartInstance = echarts.init(progressChart.value);
    updateProgressChart();
  }
};

// 更新进度图表数据
const updateProgressChart = () => {
  if (!progressChartInstance) return;
  
  const option = {
    title: {
      text: '每日学习时长',
      left: 'center',
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c} 分钟'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '25%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '分钟',
        nameTextStyle: {
          padding: [0, 0, 0, 30]
        }
      }
    ],
    series: [
      {
        name: '学习时长',
        type: 'bar',
        barWidth: '60%',
        data: [45, 62, 90, 75, 120, 60, 85],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        }
      }
    ]
  };
  
  progressChartInstance.setOption(option);
};

// 初始化周学习进度图表
const initWeeklyProgressChart = () => {
  if (weeklyProgressChart.value) {
    weeklyProgressChartInstance = echarts.init(weeklyProgressChart.value);
    updateWeeklyProgressChart();
  }
};

// 更新周学习进度图表数据
const updateWeeklyProgressChart = () => {
  if (!weeklyProgressChartInstance) return;
  
  const option = {
    title: {
      text: '每周完成题目',
      left: 'center',
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: '完成题目',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 15, name: '算法' },
          { value: 10, name: '前端' },
          { value: 8, name: '后端' },
          { value: 6, name: '数据库' },
          { value: 3, name: '测试' }
        ]
      }
    ]
  };
  
  weeklyProgressChartInstance.setOption(option);
};

// 初始化完成率图表
const initCompletionRateChart = () => {
  if (completionRateChart.value) {
    completionRateChartInstance = echarts.init(completionRateChart.value);
    updateCompletionRateChart();
  }
};

// 更新完成率图表数据
const updateCompletionRateChart = () => {
  if (!completionRateChartInstance) return;
  
  const option = {
    title: {
      text: '学习计划完成率',
      left: 'center',
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '25%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      max: 100,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    yAxis: {
      type: 'category',
      data: ['短期计划', '中期计划', '长期计划'],
      axisTick: {
        alignWithLabel: true
      }
    },
    series: [
      {
        name: '完成率',
        type: 'bar',
        data: [
          {
            value: 75,
            itemStyle: { color: '#67C23A' }
          },
          {
            value: 42,
            itemStyle: { color: '#E6A23C' }
          },
          {
            value: 15,
            itemStyle: { color: '#F56C6C' }
          }
        ],
        label: {
          show: true,
          position: 'right',
          formatter: '{c}%'
        }
      }
    ]
  };
  
  completionRateChartInstance.setOption(option);
};

// 初始化难度分布图表
const initDifficultyDistributionChart = () => {
  if (difficultyDistributionChart.value) {
    difficultyDistributionChartInstance = echarts.init(difficultyDistributionChart.value);
    updateDifficultyDistributionChart();
  }
};

// 更新难度分布图表数据
const updateDifficultyDistributionChart = () => {
  if (!difficultyDistributionChartInstance) return;
  
  const option = {
    title: {
      text: '难度分布',
      left: 'center',
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '25%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['简单', '中等', '困难'],
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value',
      name: '题目数量',
      nameTextStyle: {
        padding: [0, 0, 0, 30]
      }
    },
    series: [
      {
        name: '难度分布',
        type: 'bar',
        data: [
          {
            value: 20,
            itemStyle: { color: '#67C23A' }
          },
          {
            value: 30,
            itemStyle: { color: '#E6A23C' }
          },
          {
            value: 10,
            itemStyle: { color: '#F56C6C' }
          }
        ],
        label: {
          show: true,
          position: 'top',
          formatter: '{c}'
        }
      }
    ]
  };
  
  difficultyDistributionChartInstance.setOption(option);
};

// 初始化学习日历热力图表
const initStudyCalendarChart = () => {
  if (studyCalendarChart.value) {
    studyCalendarChartInstance = echarts.init(studyCalendarChart.value);
    updateStudyCalendarChart();
  }
};

// 更新学习日历热力图表数据
const updateStudyCalendarChart = () => {
  if (!studyCalendarChartInstance) return;
  
  const option = {
    title: {
      text: '学习日历热力图',
      left: 'center',
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'item'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '25%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'category',
      data: ['上午', '下午', '晚上'],
      axisTick: {
        alignWithLabel: true
      }
    },
    series: [
      {
        name: '学习时长',
        type: 'heatmap',
        data: [
          [0, 0, 10],
          [0, 1, 20],
          [0, 2, 30],
          [1, 0, 15],
          [1, 1, 25],
          [1, 2, 35],
          [2, 0, 20],
          [2, 1, 30],
          [2, 2, 40]
        ],
        itemStyle: {
          color: '#165DFF'
        }
      }
    ]
  };
  
  studyCalendarChartInstance.setOption(option);
};

// 初始化月度进度图表
const initMonthlyProgressChart = () => {
  if (monthlyProgressChart.value) {
    monthlyProgressChartInstance = echarts.init(monthlyProgressChart.value);
    updateMonthlyProgressChart();
  }
};

// 更新月度进度图表数据
const updateMonthlyProgressChart = () => {
  if (!monthlyProgressChartInstance) return;
  
  const option = {
    title: {
      text: '月度进度',
      left: 'center',
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c} 分钟'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '25%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '分钟',
        nameTextStyle: {
          padding: [0, 0, 0, 30]
        }
      }
    ],
    series: [
      {
        name: '学习时长',
        type: 'bar',
        barWidth: '60%',
        data: [45, 62, 90, 75, 120, 60, 85, 45, 62, 90, 75, 120],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        }
      }
    ]
  };
  
  monthlyProgressChartInstance.setOption(option);
};

// 初始化完成状态图表
const initCompletionStatusChart = () => {
  if (completionStatusChart.value) {
    completionStatusChartInstance = echarts.init(completionStatusChart.value);
    updateCompletionStatusChart();
  }
};

// 更新完成状态图表数据
const updateCompletionStatusChart = () => {
  if (!completionStatusChartInstance) return;
  
  const option = {
    title: {
      text: '完成状态',
      left: 'center',
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '25%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['已完成', '进行中', '未开始'],
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value',
      name: '数量',
      nameTextStyle: {
        padding: [0, 0, 0, 30]
      }
    },
    series: [
      {
        name: '完成状态',
        type: 'bar',
        data: [
          {
            value: 20,
            itemStyle: { color: '#67C23A' }
          },
          {
            value: 30,
            itemStyle: { color: '#E6A23C' }
          },
          {
            value: 10,
            itemStyle: { color: '#F56C6C' }
          }
        ],
        label: {
          show: true,
          position: 'top',
          formatter: '{c}'
        }
      }
    ]
  };
  
  completionStatusChartInstance.setOption(option);
};

// 初始化用户趋势图表
const initUserTrendChart = () => {
  if (userTrendChart.value) {
    userTrendChartInstance = echarts.init(userTrendChart.value);
    updateUserTrendChart();
  }
};

// 更新用户趋势图表数据
const updateUserTrendChart = () => {
  if (!userTrendChartInstance) return;
  
  const option = {
    title: {
      text: '用户趋势',
      left: 'center',
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c} 人'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '25%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '人数',
        nameTextStyle: {
          padding: [0, 0, 0, 30]
        }
      }
    ],
    series: [
      {
        name: '用户趋势',
        type: 'line',
        data: [45, 62, 90, 75, 120, 60, 85],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        }
      }
    ]
  };
  
  userTrendChartInstance.setOption(option);
};

// 监听职位选择变化，更新图表
watch(selectedPosition, () => {
  updateTagChart();
  updatePathChart();
  updateProgressChart();
  updateWeeklyProgressChart();
  updateCompletionRateChart();
  updateDifficultyDistributionChart();
  updateStudyCalendarChart();
  updateMonthlyProgressChart();
  updateCompletionStatusChart();
  updateUserTrendChart();
});

// 窗口大小改变时重新调整图表大小
const resizeCharts = () => {
  tagChartInstance?.resize();
  pathChartInstance?.resize();
  progressChartInstance?.resize();
  weeklyProgressChartInstance?.resize();
  completionRateChartInstance?.resize();
  difficultyDistributionChartInstance?.resize();
  studyCalendarChartInstance?.resize();
  monthlyProgressChartInstance?.resize();
  completionStatusChartInstance?.resize();
  userTrendChartInstance?.resize();
};

// 页面加载时初始化图表
onMounted(() => {
  // 初始化图表
  setTimeout(() => {
    initTagDistributionChart();
    initLearningPathChart();
    initProgressChart();
    initWeeklyProgressChart();
    initCompletionRateChart();
    initDifficultyDistributionChart();
    initStudyCalendarChart();
    initMonthlyProgressChart();
    initCompletionStatusChart();
    initUserTrendChart();
    window.addEventListener('resize', resizeCharts);
  }, 300);
});

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('resize', resizeCharts);
  tagChartInstance?.dispose();
  pathChartInstance?.dispose();
  progressChartInstance?.dispose();
  weeklyProgressChartInstance?.dispose();
  completionRateChartInstance?.dispose();
  difficultyDistributionChartInstance?.dispose();
  studyCalendarChartInstance?.dispose();
  monthlyProgressChartInstance?.dispose();
  completionStatusChartInstance?.dispose();
  userTrendChartInstance?.dispose();
});

// 选择职位
const selectPosition = (position: string) => {
  selectedPosition.value = position;
};

// 重置职位选择
const resetPosition = () => {
  selectedPosition.value = '';
};
</script>

<style scoped>
.page-title {
  margin-bottom: 24px;
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text-1);
  position: relative;
  padding-left: 16px;
  display: inline-block;
}

.page-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 4px;
  background: linear-gradient(to bottom, #165DFF, #41B883);
  border-radius: 2px;
}

.position-selector-container {
  margin-bottom: 32px;
}

.position-selector-card {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.position-selector-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-2);
}

.position-selector-header h3 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-1);
}

.position-selector-header p {
  margin: 0;
  font-size: 16px;
  color: var(--color-text-3);
}

.position-selector {
  padding: 16px;
}

.position-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.position-option-card {
  width: 240px;
  height: 240px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
}

.position-option-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary-light-4);
}

.position-icon-container {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-fill-1);
  position: relative;
  overflow: hidden;
}

.position-icon-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(22, 93, 255, 0.1), rgba(65, 184, 131, 0.1));
  z-index: 1;
}

.position-icon {
  font-size: 48px;
  color: var(--color-primary-6);
  position: relative;
  z-index: 2;
}

.position-info {
  padding: 20px;
  flex: 1;
}

.position-info h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-1);
}

.position-info p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-3);
  line-height: 1.5;
}

.position-action {
  padding: 16px;
  border-top: 1px solid var(--color-fill-3);
  text-align: center;
}

.position-action .arco-btn {
  width: 80%;
  font-weight: 500;
}

.back-button-container {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
}

.back-button-container .arco-btn {
  display: flex;
  align-items: center;
}

.back-button-container .arco-btn i {
  margin-right: 6px;
}

.overview-container,
.plan-container,
.learning-path-container,
.recommended-problems-container {
  margin-bottom: 32px;
}

.overview-card {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.overview-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-1);
}

.chart-container {
  height: 200px;
  width: 100%;
  margin-bottom: 16px;
  position: relative;
}

.chart {
  height: 100%;
  width: 100%;
}

.chart-title {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-3);
  margin-top: 8px;
}

.stats-row {
  margin-top: 16px;
}

.stat-card {
  padding: 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-1);
}

.stat-label {
  font-size: 14px;
  color: var(--color-text-3);
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-1);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.section-icon {
  margin-right: 8px;
  font-size: 24px;
  color: var(--color-primary-6);
}

.plan-card {
  height: 100%;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.plan-cover {
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: white;
}

.plan-icon {
  font-size: 48px;
}

.plan-difficulty {
  position: absolute;
  top: 10px;
  right: 10px;
}

.plan-description {
  margin-top: 8px;
}

.plan-tags {
  margin-top: 8px;
}

.plan-progress {
  margin-top: 24px;
  margin-bottom: 16px;
  position: relative;
}

.progress-text {
  position: absolute;
  right: 0;
  top: -20px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  gap: 8px;
}

.progress-text span:first-child {
  color: var(--color-text-3);
}

.progress-text span:last-child {
  color: var(--color-text-1);
}

.plan-actions {
  display: flex;
  justify-content: space-between;
}

.learning-path-card {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.learning-path-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.path-description {
  max-width: 70%;
}

.path-description p {
  margin: 0;
  color: var(--color-text-2);
  font-size: 14px;
  line-height: 1.6;
}

.path-legend {
  display: flex;
  gap: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.learning-path-steps {
  padding: 20px 0;
}

.path-stage {
  background-color: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 8px;
}

.stage-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.stage-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 12px;
}

.stage-dot.completed {
  background-color: #67C23A;
}

.stage-dot.in-progress {
  background-color: #E6A23C;
}

.stage-dot.not-started {
  background-color: #909399;
}

.stage-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-1);
  margin-right: 16px;
  min-width: 80px;
}

.stage-progress {
  flex: 1;
  position: relative;
}

.stage-content {
  padding-left: 32px;
}

.stage-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.stage-description {
  color: var(--color-text-3);
  font-size: 14px;
}

.path-connector {
  height: 30px;
  position: relative;
  margin-left: 10px;
}

.connector-line {
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-border-3);
}

.connector-arrow {
  position: absolute;
  left: 5px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--color-border-3);
}

.learning-path-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.recommended-problems-container {
  margin-bottom: 32px;
}

.recommended-problems-container .arco-table {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.recommended-problems-container .arco-table-header {
  background-color: var(--color-fill-2);
}

.recommended-problems-container .arco-table-header th {
  color: var(--color-text-1);
}

.recommended-problems-container .arco-table-row {
  cursor: pointer;
}

.recommended-problems-container .arco-table-row:hover {
  background-color: var(--color-fill-3);
}

.recommended-problems-container .arco-table-row td {
  padding: 12px 16px;
}

.recommended-problems-container .arco-table-row td .arco-tag {
  margin: 0 4px;
}

.recommended-problems-container .arco-table-row td .arco-btn {
  margin: 0 4px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .plan-card {
    margin-bottom: 16px;
  }
  
  .learning-path-chart {
    height: 300px;
  }
}

.progress-chart-container {
  height: 200px;
  width: 100%;
}

.stats-row {
  margin-top: 16px;
}

.stat-card {
  padding: 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-1);
}

.stat-label {
  font-size: 14px;
  color: var(--color-text-3);
}
</style>
